<template>
  <div class="scenic-tree">
    <div class="scenic-tree-left">
      <el-tabs type="border-card">
        <el-tab-pane :label="title">
          <div class="scenic-name">
            <el-input
              placeholder="请输入景区名称搜索"
              v-model="list.filter.scenicName"
              class="input-with-select"
              clearable
            ></el-input>
          </div>
          <el-scrollbar wrap-class="scenic-tree-scrollbar">
            <el-menu :default-active="activeIndex" @select="selectArea">
              <el-menu-item index="" v-if="isAll">全部</el-menu-item>
              <el-menu-item
                :key="index"
                v-for="(item, index) of list.data"
                :index="item.scenicId"
              >
                {{ item.scenicName }}
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
          <div class="custom-page">
            <el-pagination
              v-bind="elPaginationProps"
              layout="prev, pager, next"
              :pagerCount="5"
              small
              :total="list.total"
              :currentPage.sync="list.filter.pageNo"
              :pageSize.sync="list.filter.pageSize"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="page-content">
      <el-scrollbar wrap-class="scenic-tree-scrollbar">
        <slot />
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
// 景区筛选左侧
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
export default {
  name: 'ScenicScreen',
  mixins: [pageMixin],
  props: {
    value: '',
    title: {
      type: String,
      default: '所属景区'
    },
    // 是否需要全部选项
    isAll: {
      type: Boolean,
      default: true
    }
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/scenic',
      axiosConfig: {
        getList: {
          url: 'list'
        }
      },
      list: {
        filter: {
          pageSize: 20,
          status: 1,
          typeId: null,
          name: ''
        }
      }
    }),
  watch: {
    'list.data' (n, o) {
      // 如果没有全部选项，默认选中第一项
      if (o?.length == 0 && n.length > 0 && !this.isAll) {
        this.activeIndex = n[0].scenicId
        this.selectArea(n[0].scenicId)
      } else if (n.length == 0) {
        this.selectArea(-1)
      }
    }
  },
  data () {
    return {
      activeIndex: ''
    }
  },
  methods: {
    selectArea (n, index) {
      if (n == -1) {
        this.$emit('input', '')
      } else {
        this.activeIndex = n
        this.$emit('input', n)
      }
      let row = this.list.data.find(_ => _.scenicId == n)
      this.$emit('change', n, row)
    }
  }
}
</script>
<style lang="scss" scoped>
.scenic-tree {
  display: flex;
  .scenic-tree-left {
    padding: 20px 0 0 20px;
    width: 260px;
    .scenic-name {
      padding-bottom: 10px;
    }
    :deep(.el-scrollbar) {
      height: calc(100vh - 282px);
      .is-horizontal {
        display: none;
      }
      .el-menu {
        border-right: none;
        .el-menu-item {
          height: 40px;
          line-height: 40px;
          padding: 0 10px !important;
        }
        .el-menu-item.is-active {
          background-color: #e8f4ff;
        }
      }
    }
    .custom-page {
      padding-top: 10px;
      margin-left: -15px;
      text-align: center;
      :deep(.el-pagination.is-background.el-pagination--small .el-pager li) {
        margin: 0 1px;
      }
    }
    .scrollbar-box {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 203px);
    }
    .el-scrollbar {
      flex: 1;
    }
  }
  .page-content {
    width: 0;
    flex: 1;
    .el-scrollbar {
      height: calc(100vh - 85px);
    }
  }
}
</style>
